<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频浏览</title>
    <!--<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Developed By M Abdur Rokib Promy">
    <meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
    <link th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/font-awesome.min.css}" href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/ionicons.min.css}" href="../static/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link rel="icon" type="image/x-icon" th:href="@{/images/favicon.png}" href="../static/images/favicon.png">
    <link th:href="@{/css/morris.css}" href="../static/css/morris.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/jquery-jvectormap-1.2.2.css}" href="../static/css/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/datepicker3.css}" href="../static/css/datepicker3.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/daterangepicker-bs3.css}" href="../static/css/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/iCheck/all.css}" href="../static/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/style.css}" href="../static/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_787526_ljlrtoo6w7g.css">
     <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-black">
<header class="header" th:fragment="head">
    <a th:href="@{/upload}" href="upload.html" class="logo" style="font-size: 25px;font-family:黑体">
        菜单
    </a>
    <nav class="navbar navbar-fixed-top" role="navigation">
        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-user"></i>
                        <span>欢迎您：<span th:if="${session.username}">[[${session.username}]]</span><i class="caret"></i></span>


                    </a>
                    <ul class="dropdown-menu dropdown-custom dropdown-menu-right">
                        <li>
                            <a><i class="iconfont icon-yonghu2 fa fa-ban fa-fw pull-right"></i>个人信息</a>
                        </li>
						 <li>
                            <a><i class="iconfont icon-xiugai  fa fa-ban fa-fw pull-right"></i>个人信息修改</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/user/logout}"><i class="iconfont icon-tuichu2 fa fa-ban fa-fw pull-right"></i>退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <nav class="navbar navbar-static-top" role="navigation">
        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-user"></i>
                        <span th:text="欢迎您："><i class="caret" th:if="${session.user}">[[${session.user}]]</i></span>
                    </a>
                    <ul class="dropdown-menu dropdown-custom dropdown-menu-right">
                        <li>
                            <a th:href="@{/upload}"><i class="iconfont icon-yonghu2 fa fa-ban fa-fw pull-right"></i>个人信息</a>
                        </li>
                        <li>
                            <a th:href="@{/upload}"><i class="iconfont icon-xiugai  fa fa-ban fa-fw pull-right"></i>个人信息修改</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/user/logout}"><i class="iconfont icon-tuichu2 fa fa-ban fa-fw pull-right"></i>退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <aside class="left-side sidebar-offcanvas" th:fragment="left">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img th:src="@{/images/logo.jpg}" src="../static/images/logo.jpg" class="img-circle" alt="User Image" />
                </div>
                <div class="pull-left info">
                    <p th:text="Hello"></p>
                    <a href="#"><i class="fa fa-circle text-success"></i>管理员</a>
                </div>
            </div>
            <ul class="sidebar-menu">
                <li >
                    <a th:href="@{/video_back/upload}" href="upload.html">
                        <i class="iconfont icon-msnui-upload"></i> <span class="cebian">&nbsp;电影上传</span>
                    </a>
                </li>
                <li>
                    <a th:href="@{/video_back/tvupload}" href="tvupload.html">
                        <i class="iconfont icon-web-icon-"></i> <span class="cebian">&nbsp;电视剧上传</span>
                    </a>
                </li>
				 <li>
                    <a th:href="@{/video_back/update}" href="update.html">
                        <i class="iconfont icon-xiugai07"></i> <span class="cebian">&nbsp;视频修改</span>
                    </a>
                </li>
				<li class="active">
                    <a th:href="@{/video_back/list}" href="look.html">
                        <i class="iconfont icon-liulan"></i> <span class="cebian">&nbsp;视频播放</span>
                    </a>
                </li>
            </ul>
        </section>
    </aside>
    <aside class="right-side">
        <section class="content">
            <div class="row" style="margin-bottom:5px;">
                <div class="col-md-12" style="text-align: center">
                    <div class="sm-st clearfix">
                      <div class="sm-st-info">
                          <span>浪潮影院</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading" id="look_video">影片浏览</header>
                        <div class="panel-body">


                            <div class="row">
                                <div class="col-lg-offset-6 col-lg-6">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button type="button" th:if="${searchSelect}" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="select_seach">[[${searchSelect}]]<span class="caret"></span></button>
                                            <button type="button" th:unless="${searchSelect}" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="select_seach">选择搜索分类<span class="caret"></span></button>
                                            <ul class="dropdown-menu" >
                                                <li onclick="this.parentElement.previousElementSibling.innerHTML=this.innerText+`<span class='caret'></span>`"><a href="#">视频标题</a></li>
                                                <li role="separator" class="divider"></li>
                                                <li onclick="this.parentElement.previousElementSibling.innerHTML=this.innerText+`<span class='caret'></span>`"><a href="#">视频标签</a></li>
                                                <li role="separator" class="divider"></li>
                                                <li onclick="this.parentElement.previousElementSibling.innerHTML=this.innerText+`<span class='caret'></span>`"><a href="#">视频描述</a></li>
                                            </ul>
                                        </div>
                                        <input type="text" class="form-control" placeholder="请输入关键词..." id="searchWord" th:value="${searchWords}" >
                                        <span class="input-group-btn" id="searchSubmit">
                                            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" ></span>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <br>
                            </div>



                            <div class="row" style="display: flex;flex-wrap: wrap;" id="content">
                                <div class="col-md-2 thumbnail" th:each="p:${page.content}" style="display: flex;
                                flex-direction: column;" onclick="videoPlay(this)">

                                        <img th:src="${p.coverURL}" style="width: 100%;height: 100%;" th:alt="${p.vTitle}" th:title="${p.vTitle}">
                                        <div class="caption">
                                            <h5 th:text="${p.vTitle}"></h5>
                                            <p th:if="${p.vTotal!=1}">第[[${p.vNumber}]]集&nbsp;&nbsp;&nbsp;总[[${p.vTotal}]]集</p>
                                            <p th:text="${p.vTag}"></p>
                                            <p th:text="${p.vCategory==0}?'电影':'电视剧'"></p>
                                            <p th:text="${p.vPermission==0}?'非会员':'会员'" th:style="${p.vPermission!=0}?'color:red':''"></p>
                                            <input type="hidden" th:value="${p.aId}">
                                        </div>
                                </div>
                            </div>
                            <br>
                            <div class="row" th:if="${page.totalElements}">
                                <div class="col-md-12" style="padding: 0 auto">
                                    <nav aria-label="Page navigation" align="center" style="align-self: center">
                                        <ul class="pagination">
                                            <li th:class="${page.first}?'disabled':''">
                                                <a th:if="${searchSelect}" th:href="@{/video_back/find_like_look(num=0,size=12,select=${searchSelect},input=${searchWords})}" aria-label="Previous">
                                                    <span aria-hidden="true">首页;</span>
                                                </a>
                                                <a th:unless="${searchSelect}" th:href="@{/video_back/list(num=0,size=12)}" aria-label="Previous">
                                                    <span aria-hidden="true">首页;</span>
                                                </a>
                                            </li>
                                            <li th:each="pageNo:${#numbers.sequence(0, page.totalPages-1)}"
                                                th:class="${page.number==pageNo}?'active':''">
                                                <a th:if="${searchSelect}" th:href="@{/video_back/find_like_look(num=${pageNo},size=12,select=${searchSelect},input=${searchWords})}" th:text="${pageNo}+1"></a>
                                                <a th:unless="${searchSelect}" th:href="@{/video_back/list(num=${pageNo},size=12)}" th:text="${pageNo}+1"></a>
                                            </li>
                                            <li th:class="${page.last}?'disabled':''">
                                                <a th:if="${searchSelect}" th:href="@{/video_back/find_like_look(num=${page.totalPages}-1,size=12,select=${searchSelect},input=${searchWords})}" aria-label="Next">
                                                    <span aria-hidden="true">末页;</span>
                                                </a>
                                                <a th:unless="${searchSelect}" th:href="@{/video_back/list(num=${page.totalPages}-1,size=12)}" aria-label="Next">
                                                    <span aria-hidden="true">末页;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
          </div>
        </section>
        <div  class="footer-main" style="bottom: 0;width: 100%;padding-right: 2%">
            浪潮影院 &nbsp;&nbsp;&nbsp;&nbsp;&copy; 版权所有&nbsp;&nbsp;&nbsp;&nbsp; 2018
        </div>
    </aside>
</div>
<script th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js" type="text/javascript"></script>
<script th:src="@{/js/jquery-ui-1.10.3.min.js}" src="../static/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js" type="text/javascript"></script>
<script th:src="@{/js/daterangepicker.js}" src="../static/js/daterangepicker.js" type="text/javascript"></script>
<script th:src="@{/js/chart.js}" src="../static/js/chart.js" type="text/javascript"></script>
<script th:src="@{/js/icheck.min.js}" src="../static/js/icheck.min.js" type="text/javascript"></script>
<script th:src="@{/js/fullcalendar.js}" src="../static/js/fullcalendar.js" type="text/javascript"></script>
<script th:src="@{/js/app.js}" src="../static/js/app.js" type="text/javascript"></script>
<script th:src="@{/js/dashboard.js}" src="../static/js/dashboard.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"/>
<script th:src="@{/lib/es6-promise.min.js}" src="../static/lib/es6-promise.min.js"></script>
<script th:src="@{/lib/aliyun-oss-sdk-5.2.0.min.js}" src="../static/lib/aliyun-oss-sdk-5.2.0.min.js"></script>
<script th:src="@{/js/aliyun-upload-sdk-1.4.0.min.js}" src="../static/js/aliyun-upload-sdk-1.4.0.min.js"></script>
<script th:src="@{/js/update.js}" src="../static/js/update.js"></script>
</body>
<script>
    function videoPlay(el){
        console.log(123);
        let id=$(el).children("div").children("input").val()
        console.log(id);
        window.open('/video_back/play?aId='+id)
    }
</script>
</html>